import { ref } from "vue";
let name = ref<string>("");
let isVip = ref<boolean>(true);
let arr = [1, 2, 3, 4];
type Props = {
  title: string;
};

const readerDom = (props: Props, ctx: any) => {
  return (
    <div>
      <div>hello tsx</div>

      {/* v-modal支持 */}
      <div>
        name: <input type="text" v-model={name.value} />
      </div>
      <div>{name.value}</div>
      <hr />
      {/* v-show支持 */}
      <div>
        <div v-show={isVip.value}>普通用户</div>
        <div v-show={!isVip.value}>vip用户</div>
      </div>
      <hr />
      {/* v-if 不支持 */}
      <div>
        {/* <div v-if = {isVip.value}>普通用户</div> */}
        {isVip.value ? <div>普通用户</div> : <div>vip用户</div>}
      </div>
      {/* 不支持v-for */}
      <div>
        {arr.map((v) => {
          return <div>{v}</div>;
        })}
      </div>
      {/* 不支持v-bind 可以使用data- 自定义属性代替 */}
      <div>
        <div data-index="1">123</div>
      </div>
      {/* v-on 支持 */}
      <div>
        <button onClick={handleClick.bind(this, "点我啊")}>点我</button>
      </div>
      {/* 父子组件传参//  也父组件给子组件可以传参pros    
// 也可以子组件给父组件传参，使用ctx表示上下文 */}
      <div>{props.title}</div>
      <div>
        <button onClick={ctxEmit.bind(this, ctx)}>emit</button>
      </div>
    </div>
  );
};
const ctxEmit = (ctx: any) => {
  ctx.emit("on-click", 123);
};
const handleClick = (b: string) => {
  console.log("点到我了");
  console.log("b", b);
};
export default readerDom;
